<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/elementui.js"></script>
    <link rel="stylesheet" href="./css/elementUI.css" />
    <link rel="stylesheet" href="./css/reg.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <title>注册</title>
  </head>
  <body>
    <div id="reg" v-loading.fullscreen.lock="loading">
      <el-card class="reg" header="免费注册">
        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
          <el-form-item label="账号名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <div class="jump">
            <a href="/login.html">已有账号？立即登录</a>
          </div>
          <el-button
            style="width: 100%"
            type="warning"
            @click="submitForm('form')"
            >立即注册</el-button
          >
        </el-form>
      </el-card>
    </div>

    <script>
      new Vue({
        el: '#reg',
        data: {
          form: {
            name: '',
            password: '',
            email: '',
          },
          rules: {
            name: [
              { required: true, message: '请输入账号名称', trigger: 'blur' },
              {
                min: 1,
                max: 10,
                message: '账号名称的长度为1～10位',
                trigger: 'change',
              },
            ],
            password: [
              {
                required: true,
                message: '请输入用户密码',
                trigger: 'blur',
              },
              {
                min: 6,
                max: 18,
                message: '密码的长度是6～18位',
                trigger: 'change',
              },
            ],
            email: [
              {
                type: 'email',
                message: '请输入正确的邮箱地址',
                trigger: ['blur', 'change'],
              },
            ],
          },
          loading: false,
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate(valid => {
              if (valid) {
                this.loading = true
                axios.post('/reg.do', this.form).then(res => {
                  console.log(res)
                  window.open('/login.html')

                  this.loading = false
                })
              } else {
                return false
              }
            })
          },
        },
      })
    </script>
  </body>
</html>
